<template>
	<view class="pro-detail" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }"
		v-if="dataForm.pk_id?true:false">
		<sww-swipe :list="swipeList" indicatorDots autoplay></sww-swipe>



		<view class="pro_info">
			<view class="pro_info_item">
				<view class="pro_info_price">¥{{dataForm.amount || 0}}</view>

				<view class="pro_info_name w-500 u-line-1">{{dataForm.name}}</view>
				<view class="pro_info_title w-500  u-line-1">{{dataForm.title}}</view>
			</view>
		</view>


		<view class="pro_stock" v-if="dataForm.product_stock[0]">
			<!-- 			<view class="u-flex pro_stock_title">
				<view class="u-m-r-10">规格选择</view>
				<view class="u-m-l-10 u-m-r-10">(最低起购<text class="pro_stock_num">{{dataForm.minimum}}</text>份)</view>
				<view class="">(最高购<text class="pro_stock_num">{{dataForm.limitpurchase}}</text>份)</view>
			</view> -->
			<view class="pro_stock_content">
				<template v-for="(item,index) in dataForm.product_stock">
					<view class="pro_stock_content_item" :key='item.pk_id' v-if="openJudeg?true: index < 3">
						<view class="u-flex">
							<image :src="item.img" mode="aspectFill" class="pro_stock_content_item_img"></image>
							<view class="u-m-l-14">
								<view class="pro_stock_content_item_name w-200 u-line-1">{{item.name}}</view>
								<view>
									<text class="pro_stock_content_item_value">价值</text>
									<text class="pro_stock_content_item_price">{{item.amount}}</text>
								</view>
							</view>
						</view>
						<view class="pro_stock_num_box">
							x{{item.stock_num}}
						</view>
					</view>
				</template>
				<view class="u-p-t-40 show_btn" @click="onOpen" v-if="dataForm.product_stock.length>3">
					<u-icon :name="openJudeg?'e76e':'e772'" size="34" color="#666666" custom-prefix="iconfont" />
				</view>
			</view>
		</view>


		<view class="parse" v-if="dataForm.remark">
			<view class="parse_title">
				—— 详细信息 ——
			</view>
			<view class="parse_content">
				<u-parse :html="dataForm.remark"></u-parse>
			</view>
		</view>
		<sww-goods-action>
			<view class="nav" @click="$linkTo('index')">
				<u-icon name="home" size="36"></u-icon>
				<text>首页</text>
			</view>
			<view class="nav" @click="$customer">
				<button open-type="contact" class="u-reset-button contact_btn"></button>
				<u-icon name="kefu-ermai" size="36"></u-icon>
				<text>客服</text>
			</view>

			<view class="btn u-font-36" @click="goBuy">
				<view class="btn_item">
					立即购买
				</view>
			</view>
		</sww-goods-action>

		<sww-login></sww-login>
	</view>
</template>

<script>
	import {
		pageShare
	} from '@/mixins/pageShare';
	import {
		uniNavigate,
		uniModal,
		uniCall
	} from '@/utils/uniPromise.js';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [pageShare],
		data() {
			return {
				swipeList: [],
				paramsObj: {},
				dataForm: {},
				openJudeg: false,
				browTime: 0,
				numValue: 1,
				id: '',
				status: false,
			};
		},
		onLoad: function(options) {
			if (options.id) {
				this.id = options.id
				this.initPage();
			} else {
				this.$linkTo('index');
			}
		},
		onShow() {
			if (this.status) {
				this.initPage();
			}
		},
		onShareAppMessage: function() {
			return this.getShareAppMessage();
		},
		onShareTimeline: function() {
			return this.getShareTimeline();
		},
		methods: {
			// 检测登录
			checkLogin() {
				return this.$login('initPage', this.dataForm.pk_id);
			},
			onOpen() {
				this.openJudeg = !this.openJudeg
			},

			initPage(id) {
				this.$loading()
				this.$resPost('GetProductPackageDetailed', {
					pk_id: this.id
				}).then(({
					data
				}) => {
					if (!data.pk_id || data.status != 1) {
						return Promise.reject();
					}

					this.status = true

					if (Array.isArray(data.product_stock)) {
						data.product_stock = data.product_stock.reduce((pre, el) => {
							pre.push({
								...el,
								stockVal: 0
							})
							return pre
						}, [])
					} else {
						data.product_stock = []
					}


					if (data.img) {
						this.swipeList = data.img.split(',').map(item => {
							let obj = {
								img: item
							};
							return obj;
						});
					}
					if (data.num <= 0) {
						this.numValue = 0
					}
					this.dataForm = data;

					this.$hide()
					this.customShareParams(); // 设置当前产品页的分享参数
				}).catch(() => {
					this.$hide();
					uniModal({
						title: '商品已下架',
						showCancel: false,
						confirmText: '我知道了'
					}).then(() => {
						this.uniBack();
					});
				})
			},
			// 设置当前产品页的分享参数
			customShareParams() {
				if (!this.shareParams.title) {
					let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
					let curRoute = routes[routes.length - 1].route; //获取当前页面路由
					let curParam = routes[routes.length - 1].options; //获取路由参数
					let obj = this.swipeList.find(item => {
						return item.img;
					});
					this.shareParams = {
						title: this.dataForm.name,
						path: curRoute,
						query: curParam,
						imgUrl: obj && obj.img ? obj.img : ''
					};
					this.onShareByH5();
				}
			},
			// 客服
			$customer() {
				// #ifdef H5
				let phone = this.vuex_business.custom_tel;
				uniCall(phone);
				// #endif
			},
			goBuy() {
				this.$login('goBuy').then(() => {
					let {
						stock_num,
						product_stock
					} = this.dataForm
					if (stock_num <= 0) return this.$toast('暂无库存')
					if (!Array.isArray(product_stock) || !product_stock[0]) return this.$toast('请设置服务项')
					let list = product_stock.reduce((pre, el) => {

						pre.push({
							fk_stock_id: el.pk_id,
							num: el.stock_num,
							fk_pro_id: this.dataForm.pk_id,
							product_name: el.name,
							price: el.amount,
							express_num: 0, // 多少起免邮费
							express_price: 0, // 快递费用
							product_img: el.img,
							product_freight: this.dataForm.product_freight || [], // 运费模板
						})
						return pre
					}, [])
					let params = {
						list,
						package_price: this.dataForm.amount //套餐价格
					}

					this.paramsObj = params
					// #ifdef   MP-ALIPAY  || MP-BAIDU
					this.$to(`/package/product/productPacjage/order`)
					// #endif
					// #ifndef MP-ALIPAY || MP-BAIDU
					uniNavigate('/package/product/productPacjage/order').then(res => {
						res.eventChannel.emit('acceptParams', params);
					});
					// #endif
				})
			},
		}
	};
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style lang="scss" scoped>
	.pro-detail {
		.w-500 {
			width: 500rpx;
		}

		.w-200 {
			width: 200rpx;
		}

		.pro_stock {
			width: 690rpx;
			padding-bottom: 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 0 auto;
			padding: 33rpx 30rpx 24rpx;

			.pro_stock_title {
				font-size: 22rpx;
				color: #858585;
				margin-bottom: 14rpx;
			}

			.pro_stock_num {
				color: #F24D4E;
			}

			.show_btn {
				display: flex;
				justify-content: center;
			}

			.pro_stock_content {
				.pro_stock_content_item {
					display: flex;
					justify-content: space-between;
					padding: 14rpx;
					width: 630rpx;
					height: 104rpx;
					margin-bottom: 14rpx;
					background: #F6F7F9;
					border-radius: 8rpx;

					&:nth-last-of-type(1) {
						margin-bottom: 0;
					}

					.pro_stock_content_item_name {
						font-size: 26rpx;
						font-weight: bold;
						color: #000000;
					}

					.pro_stock_content_item_value {
						font-size: 20rpx;
						color: #858585;
					}

					.pro_stock_content_item_price {
						font-size: 21rpx;
						font-weight: bold;
						color: #F24D4E;
						margin-left: 8rpx;
					}

					.pro_stock_content_item_img {
						width: 76rpx;
						height: 76rpx;
					}

					.pro_stock_num_box {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						font-size: 26rpx;
						color: #858585;
					}
				}
			}
		}

		.pro_info {
			width: 690rpx;
			height: 201rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 24rpx auto;

			.pro_info_item {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				padding: 34rpx 30rpx 40rpx;
				height: 100%;

				.price_title {
					display: inline-block;
					margin-left: 5rpx;
					font-size: 20rpx;
					color: #999999;
				}

				.pro_info_price {
					font-size: 30rpx;
					color: #F24D4E;
				}

				.pro_info_name {
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
				}

				.pro_info_title {
					font-size: 22rpx;
					color: #858585;
				}
			}
		}



		.parse {
			margin-top: 20rpx;
			background-color: #ffffff;

			.parse_content {
				padding: 0 20rpx;
			}

			.parse_title {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 90rpx;
				font-size: 22rpx;
				color: #858585;
			}
		}


		.nav {
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.contact_btn {
				position: absolute;
				top: 0;
				left: 24rpx;
				width: 70rpx;
				height: 70rpx;
			}
		}

		.nav_price {
			margin-right: 20rpx;
		}

		.btn {
			flex: 3;
			padding-right: 26rpx;
			color: #fff;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100%;
			font-size: 30rpx;

			.btn_item {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #F24D4E;
				width: 90%;
				border-radius: 40rpx;
				height: 80%;
			}
		}


	}
</style>
